<script lang="ts">
import { onMounted, defineComponent, ref, reactive, toRefs } from 'vue';
import { UserOutlined, InfoCircleOutlined, SearchOutlined } from '@ant-design/icons-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import type { Dayjs } from 'dayjs';
import { Table } from 'ant-design-vue';
import { userService } from '../../../../api/user';

const count = async () => {
  const response = await userService.getCount()
  console.log(response)
  state.count = response.data
  console.log(state.count)
}
const hazardData = async () => {
  const response = await userService.getHazard()
  state.data = response.data
}

const state = reactive({
  count:{
    userCount:null,
    hazardCount:null
  },
  data:[],
});

const search = reactive({
  searchText:'',searchColumn:'',
});
const searchInput = ref();
//@ts-ignore
const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm();
      search.searchText = selectedKeys[0];
      search.searchColumn = dataIndex;
};
//@ts-ignore
const handleReset = clearFilters => {
      clearFilters({ confirm: true });
      search.searchText = '';
};

const columns = [
  {title:'序号', dataIndex:'no', key:'no',},
  {
    title:'姓名', dataIndex:'username',key:'username',
    customFilterDropdown: true,
    //@ts-ignore
    onFilter: (value, record) =>
      record.username.toString().includes(value),
      //@ts-ignore
      onFilterDropdownVisibleChange: visible => {
        if (visible) {
            setTimeout(() => {
              searchInput.value.focus();
            }, 100);
          }
      },
  },
  {title:'性别', dataIndex:'gender', key:'gender',},
  {title:'年龄', dataIndex:'age', key:'age',},
  {title:'诊断疾病', dataIndex:'hazard', key:'hazard',},
  {title:'症状或体征', dataIndex:'info', key:'info',},
  {
    title:'负责医生', dataIndex:'docName', key:'docName',
    customFilterDropdown: true,
    //@ts-ignore
    onFilter: (value, record) =>
      record.docName.toString().includes(value),
      //@ts-ignore
      onFilterDropdownVisibleChange: visible => {
        if (visible) {
            setTimeout(() => {
              searchInput.value.focus();
            }, 100);
          }
      },
  },
  {
    title:'处理时间', dataIndex:'time', key:'time',
    //@ts-ignore
    sorter: (a, b) => {return a.createTime>b.createTime? 1:-1},
    sortDirections: ['descend', 'ascend'],
  },
];
//@ts-ignore
const convertTags = (num) =>{
  const str: string = num === 1 ? '已报告' : '未报告';
  return str;
}
//@ts-ignore
const timeDisplay = (timestamp) =>{
  const date = new Date(timestamp);
  return date.toLocaleString();
}
type RangeValue = [Dayjs, Dayjs];

export default defineComponent({
  components: {
    SearchOutlined,
  },
  setup() {
    onMounted(() => {
      count()
      hazardData()
    })
    return {
      locale:zhCN,
      columns,
      state,
      ...toRefs(search), handleSearch, handleReset, searchInput,
      timeDisplay,
      convertTags,
    };
  }
});
</script>

<template>
  <a-row class="HazardNum1">
    <a-col :span="25">
      <a-statistic title="总例数" :value="state.count.userCount"/>
    </a-col>
  </a-row>
  <a-row class="HazardNum2">
    <a-col :span="25">
      <a-statistic title="危急值数" :value="state.count.hazardCount" />
    </a-col>
  </a-row>

  <a-config-provider :locale="locale">
    <a-table class="table" :dataSource="state.data" :columns="columns" :pagination="false" :scroll="{ y: 320 }">
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'time'">
          {{ timeDisplay(record.time) }}
        </template>

        <span v-if="searchText && searchColumn === column.dataIndex">
          <template
            v-for="(fragment, i) in text
              .toString()
              .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
          >
            <mark
              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
              :key="i"
              class="highlight"
            >
              {{ fragment }}
            </mark>
            <template v-else>{{ fragment }}</template>
          </template>
        </span>
      </template>

      <template
        #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      >
        <div style="padding: 8px">
          <a-input
            ref="searchInput"
            :placeholder="`输入${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
          <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
            清空
          </a-button>
        </div>
      </template>
      <template #customFilterIcon="{ filtered }">
        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
      </template>
    </a-table>
  </a-config-provider>
</template>
   
<style lang="less">
  .HazardNum1{
    position: absolute;
    top: 115px;
    left: left;
    /*style="margin-right: 50px"*/
  }
  .HazardNum2{
    position: absolute;
    top: 115px;
    left: 25%;
    /*style="margin-right: 50px"*/
  }   
  .timePicker{
    position: absolute;
    width: 50%;
    top: 130px;
    left: 40%;
  }
  .search{
    position: absolute;
    top: 130px;
    left: 62%;
    background-color:steelblue;
  }
  .table{
    position: absolute;
    top: 180px;
    left: left;
    width: 80%;
  }
</style>